--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / MdiIconPickerModal.vue
Displaying Raw • Download
meshchatx/src/frontend/components/MdiIconPickerModal.vue 32e97c105419d3bcede5c1311df3ffb63b8305a4 (32e97c10) Text, 5.49 KB
T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->
Tb4b4b4<Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3openTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3selfTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'close'Tb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"flex w-full max-w-lg max-h-[min(36rem,90vh)] flex-col rounded-2xl border border-sem-border-card bg-sem-surface shadow-xl"
Te6edf3roleTff7b72=Ta5d6ff"dialog"
Tb4b4b4:Te6edf3aria-labelTff7b72=Ta5d6ff"Te6edf3$tTb4b4b4(Ta5d6ff'relay_chat.hub_icon_picker_title'Tb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex items-center justify-between gap-2 border-b border-sem-border px-5 py-4"Tb4b4b4>
Tb4b4b4<Tff7b72h2 Te6edf3classTff7b72=Ta5d6ff"text-lg font-semibold"Tb4b4b4>Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"relay_chat.hub_icon_picker_title"Tb4b4b4) Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72h2Tb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3typeTff7b72=Ta5d6ff"button"
Te6edf3classTff7b72=Ta5d6ff"rounded-lg p-1 text-sem-fg-muted hover:bg-sem-surface/60"
Tb4b4b4:Te6edf3titleTff7b72=Ta5d6ff"Te6edf3$tTb4b4b4(Ta5d6ff'common.close'Tb4b4b4)Ta5d6ff"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'close'Tb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"close" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"px-5 pt-3"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"relative"Tb4b4b4>
Tb4b4b4<Tff7b72input
Te6edf3refTff7b72=Ta5d6ff"searchInput"
Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3searchTa5d6ff"
Te6edf3typeTff7b72=Ta5d6ff"text"
Tb4b4b4:Te6edf3placeholderTff7b72=Ta5d6ff"Te6edf3$tTb4b4b4(Ta5d6ff'relay_chat.hub_icon_search'Tb4b4b4, Tb4b4b4{ Te6edf3countTff7b72: Te6edf3iconNamesTb4b4b4.Te6edf3length Tb4b4b4}Tb4b4b4)Ta5d6ff"
Te6edf3classTff7b72=Ta5d6ff"input-field !py-2.5 pr-10"
Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon
Te6edf3icon-nameTff7b72=Ta5d6ff"magnify"
Te6edf3classTff7b72=Ta5d6ff"pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2 text-sem-fg-muted"
Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex-1 overflow-y-auto custom-scrollbar px-5 py-3"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"grid grid-cols-4 sm:grid-cols-5 gap-2"Tb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3v-forTff7b72=Ta5d6ff"Te6edf3iconName Tff7b72in Te6edf3searchedIconNamesTa5d6ff"
Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Te6edf3iconNameTa5d6ff"
Te6edf3typeTff7b72=Ta5d6ff"button"
Te6edf3classTff7b72=Ta5d6ff"flex flex-col items-center gap-1 rounded-lg border p-2 transition-colors hover:bg-sem-surface/60"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Te6edf3selectedIcon Tff7b72=== Te6edf3iconName Tff7b72? Ta5d6ff'border-sem-accent bg-sem-accent/10' Tff7b72: Ta5d6ff'border-sem-border'Ta5d6ff"
Tb4b4b4:Te6edf3titleTff7b72=Ta5d6ff"Te6edf3iconNameTa5d6ff"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3pickTb4b4b4(Te6edf3iconNameTb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Tb4b4b4:Te6edf3icon-nameTff7b72=Ta5d6ff"Te6edf3iconNameTa5d6ff" Te6edf3classTff7b72=Ta5d6ff"size-7" Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Te6edf3previewIconClassTa5d6ff" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"w-full truncate text-center text-[10px] text-sem-fg-muted"Tb4b4b4>Tff7b72{{ Te6edf3iconName Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3searchedIconNamesTb4b4b4.Te6edf3length Tff7b72=== T79c0ff0Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"py-8 text-center text-sm text-sem-fg-muted"Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"relay_chat.hub_icon_no_results"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-else-ifTff7b72=Ta5d6ff"Te6edf3searchedIconNamesTb4b4b4.Te6edf3length Tff7b72>= Te6edf3maxSearchResultsTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"pt-2 text-center text-xs text-sem-fg-muted"
Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"relay_chat.hub_icon_search_limit"Tb4b4b4, Tb4b4b4{ Te6edf3countTff7b72: Te6edf3maxSearchResults Tb4b4b4}Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex justify-between gap-2 border-t border-sem-border px-5 py-3"Tb4b4b4>
Tb4b4b4<Tff7b72button Te6edf3typeTff7b72=Ta5d6ff"button" Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Te6edf3btnSecondaryTa5d6ff" Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3pickTb4b4b4(Tff7b72nullTb4b4b4)Ta5d6ff"Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"relay_chat.hub_icon_reset_default"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tff7b72button Te6edf3typeTff7b72=Ta5d6ff"button" Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Te6edf3btnSecondaryTa5d6ff" Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'close'Tb4b4b4)Ta5d6ff"Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"common.cancel"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72scriptTb4b4b4>
Tff7b72import Tb4b4b4{ Te6edf3nextTick Tb4b4b4} Tff7b72from Ta5d6ff"vue"Tb4b4b4;
Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"./MaterialDesignIcon.vue"Tb4b4b4;
Tff7b72import Tb4b4b4{ Te6edf3buildMdiIconNames Tb4b4b4} Tff7b72from Ta5d6ff"../js/mdiIconNames.js"Tb4b4b4;
Tff7b72const Te6edf3BTN_SECONDARY Tff7b72=
Ta5d6ff"inline-flex items-center justify-center gap-1.5 rounded-lg border border-sem-border bg-sem-surface-muted px-3 py-2 text-sm font-medium text-sem-fg transition hover:bg-sem-surface-raised"Tb4b4b4;
Tff7b72export Tff7b72default Tb4b4b4{
Te6edf3nameTff7b72: Ta5d6ff"MdiIconPickerModal"Tb4b4b4,
Te6edf3componentsTff7b72: Tb4b4b4{ Te6edf3MaterialDesignIcon Tb4b4b4}Tb4b4b4,
Te6edf3propsTff7b72: Tb4b4b4{
Te6edf3openTff7b72: Tb4b4b4{
Te6edf3typeTff7b72: Tffa657BooleanTb4b4b4,
Tff7b72defaultTff7b72: Tff7b72falseTb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3selectedIconTff7b72: Tb4b4b4{
Te6edf3typeTff7b72: Tffa657StringTb4b4b4,
Tff7b72defaultTff7b72: Tff7b72nullTb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3previewIconClassTff7b72: Tb4b4b4{
Te6edf3typeTff7b72: Tffa657StringTb4b4b4,
Tff7b72defaultTff7b72: Ta5d6ff"text-sem-fg-secondary"Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3emitsTff7b72: Tb4b4b4[Ta5d6ff"close"Tb4b4b4, Ta5d6ff"select"Tb4b4b4]Tb4b4b4,
Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3searchTff7b72: Ta5d6ff""Tb4b4b4,
Te6edf3maxSearchResultsTff7b72: T79c0ff200Tb4b4b4,
Te6edf3iconNamesTff7b72: Tb4b4b4[Tb4b4b4]Tb4b4b4,
Te6edf3btnSecondaryTff7b72: Te6edf3BTN_SECONDARYTb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3computedTff7b72: Tb4b4b4{
Te6edf3searchedIconNamesTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72const Te6edf3q Tff7b72= Tff7b72thisTb4b4b4.Te6edf3searchTb4b4b4.Te6edf3trimTb4b4b4(Tb4b4b4)Tb4b4b4.Te6edf3toLowerCaseTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3list Tff7b72= Te6edf3q Tff7b72? Tff7b72thisTb4b4b4.Te6edf3iconNamesTb4b4b4.Te6edf3filterTb4b4b4(Tb4b4b4(Te6edf3nameTb4b4b4) Tb4b4b4=> Te6edf3nameTb4b4b4.Te6edf3includesTb4b4b4(Te6edf3qTb4b4b4)Tb4b4b4) Tff7b72: Tff7b72thisTb4b4b4.Te6edf3iconNamesTb4b4b4;
Tff7b72return Te6edf3listTb4b4b4.Te6edf3sliceTb4b4b4(T79c0ff0Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3maxSearchResultsTb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3watchTff7b72: Tb4b4b4{
Te6edf3openTb4b4b4(Te6edf3isOpenTb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Te6edf3isOpenTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3search Tff7b72= Ta5d6ff""Tb4b4b4;
Te6edf3nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3el Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3searchInputTb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3el Tff7b72&& Tff7b72typeof Te6edf3elTb4b4b4.Te6edf3focus Tff7b72=== Ta5d6ff"function"Tb4b4b4) Tb4b4b4{
Te6edf3elTb4b4b4.Te6edf3focusTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3mountedTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3iconNames Tff7b72= Te6edf3buildMdiIconNamesTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3methodsTff7b72: Tb4b4b4{
Te6edf3pickTb4b4b4(Te6edf3iconNameTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$emitTb4b4b4(Ta5d6ff"select"Tb4b4b4, Te6edf3iconNameTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3$emitTb4b4b4(Ta5d6ff"close"Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────